<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title></title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div class="main">
			<div class="hp-tips">
				<p>请保持您的手机处于屏幕锁屏状态</p>
				<img src="img/lock.png">
			</div>
			<div class="preview">
				<div class="video-con">
					<video src="av/v2.mp4" class="video" id="js-video" preload="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true"  playsinline="true" x-webkit-playsinline="true" style="object-fit: fill;object-position: center center;"></video>
				</div>
				<div class="play show" id="play"><div class="div"><img src="img/icon_play.png"></div></div>
				<a class="godk" href="">立即打卡 ></a>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
        <script src="js/jweixin-1.0.0.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
            var video = document.getElementById('js-video');
            var playBtn = document.getElementById('play');
            //设置视频全屏
            function setSize(){
                var size = {width:1028,height:640};
                var Wwidth = $(window).width();
                var Wheight = $(window).height();
                var scale = (Wheight/Wwidth)/(size.width/size.height);
                $('.preview').css({width:Wheight,height:Wwidth,top:(Wheight-Wwidth)/2,left:0-(Wheight-Wwidth)/2});
                $('.video').css({'transform':'translate(-50%,-50%) scale('+scale+')','-webkit-transform':'translate(-50%,-50%) scale('+scale+')',width:Wheight});
            }
            setSize();
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize",setSize, false);
            window.addEventListener('resize',function(){
                setSize();
            });
            document.addEventListener("WeixinJSBridgeReady",function(){
                if(window.netease.ua.ios) {
                    $(".play").removeClass('show');
                    video.play();
                }
            }, false);
            //播放结束跳转
            $('.video').on('ended', function() {
                window.location.href='';
            });
            video.addEventListener('click',function(){
                $(".play").removeClass('show');
                video.play();
            });
            playBtn.addEventListener('click',function(){
                $(".play").removeClass('show');
                video.play();
            });
            function playVideo(){
                $(".play").removeClass('show');
                video.play();
            }
            if(window.netease.ua.ios){
                playVideo();
            }
		</script>
	</body>
</html>